<template>
  <div>
    <div class="info-bar_2">
      <van-nav-bar
        :border="false"
        left-text="修改密码"
        left-arrow
        @click-left="$router.go(-1)"
      >
      </van-nav-bar>
    </div>
    <div class="main">
      <div v-if="tipsShow" class="tips">
        <div class="load">
          <van-loading type="spinner" size="30px" color="#0094ff"
            >正在检测...</van-loading
          >
        </div>

        <van-steps :active="active">
          <van-step>正在准备环境</van-step>
          <van-step>正在验证密码</van-step>
          <van-step>环境安全</van-step>
        </van-steps>
      </div>
      <div v-else class="formInfo">
        <van-form @submit="onSubmit">
          <van-field
            v-model="password"
            name="密码"
            label="新密码"
            type="password"
            placeholder="输入新密码"
            :rules="[{ required: true, message: '请填写新密码' }]"
          />
          <p class="pwdtip">*密码应最少为6位，不能少于六位，可以为英文</p>
          <van-field
            v-model="aginpassword"
            type="password"
            name="再次"
            label="再次输入"
            placeholder="再次输入密码"
            :rules="[{ required: true, message: '再次输入密码' }]"
          />
          <van-field
            v-model="email"
            style="margin-top: 10px"
            name="邮箱"
            label="您的邮箱"
            type="text"
            placeholder="输入您的邮箱"
            :rules="[{ required: true, message: '请填写邮箱' }]"
          />
          <van-field
            v-model="sms"
            style="margin-top: 10px"
            type="password"
            center
            clearable
            label="邮箱证码"
            placeholder="请输入邮箱验证码"
            :rules="[{ required: true, message: '请输入邮箱验证码！' }]"
          >
            <template #button>
              <van-button
                native-type="button"
                @click="sendEmais"
                size="small"
                type="primary"
                >发送验证码</van-button
              >
            </template>
          </van-field>
          <div style="margin: 16px">
            <van-button
              :disabled="submitdisabled"
              round
              block
              type="info"
              native-type="submit"
              >提交</van-button
            >
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: 0,
      timer: null,
      tipsShow: true,
      password: "",
      aginpassword: "",
      sms: "",
      submitdisabled: false,
      email: "",
      newsms: "",
    };
  },
  mounted() {
    this.setTime();
  },
  created() {},
  beforeDestory() {
    clearInterval(this.timer);
  },
  methods: {
    setTime() {
      this.timer = setInterval(() => {
        this.active++;
        if (this.active === 3) {
          clearInterval(this.timer);
          this.tipsShow = false;
        }
      }, 1200);
    },
    onSubmit() {
      var Pattern = /^(\w){6,10}$/;
      if (!Pattern.test(this.password)) {
        this.$toast({
          message: "密码格式错误",
          position: "top",
        });
      } else if (this.password !== this.aginpassword) {
        this.$toast({
          message: "两次密码不一致！",
          position: "top",
        });
      } else {
        this.$toast.loading({
          message: "验证中...",
          forbidClick: true,
        });
        setTimeout(() => {
          if (this.sms != this.newsms) {
            this.$toast("验证码不正确！");
          } else {
            this.ModifyPassword();
          }
        }, 1200);
      }
    },
    //修改密码
    async ModifyPassword() {
      const { data: res } = await this.$http.post("ModifyThePassword", {
        pwd: this.password,
        id: this.$store.state.emailLogin[0].userID,
      });
      if (res.status === 200) {
        if (this.$store.state.emailLogin[0].LoginWay === "Account") {
          this.$toast("当前登录过期！");
          this.$store.commit("deleteUser", null);
          window.localStorage.removeItem("TOKEN_EMAIL");
          this.$router.push("/Homepage");
        } else {
          this.$toast("密码修改成功！");
        }
      }
    },
    async sendEmais() {
      if (this.email != "") {
        let datas = {
          email: this.email,
          content: "你正在修改密码,请保护好您的验证码",
          title: "修改登录密码",
        };
        const { data: res } = await this.$http.get("mailbox", {
          params: datas,
        });
        this.newsms = res.code;
      } else {
        this.$toast({
          message: "邮箱不能为空！",
          position: "top",
        });
      }
    },
  },
};
</script>
<style lang="less" scoped>
.info-bar_2 {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1200;
  .van-nav-bar {
    background-color: #96bbce;
  }
}
.main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #f1f1f1;
  .tips {
    margin-top: 90px;
    padding: 10px;
    .load {
      width: 150px;
      margin: 5px auto;
      text-align: center;
    }
  }
  .formInfo {
    margin-top: 45px;
    .pwdtip {
      padding: 2px;
      font-size: 12px;
      margin-top: 2px;
    }
  }
}
</style>